import React, { useState } from 'react';
import {
  Box,
  Card,
  CardBody,
  Flex,
  SimpleGrid,
  Text,
  useColorModeValue,
  useDisclosure,
} from '@chakra-ui/react';
import WordCard from './word-card';
import WordDetailModal from './word-detail-modal';
import useSwipe from '../../hooks/use-swipe';
import { Word } from '../../types';

interface WordListProps {
  words: Word[];
  favorites: Set<number>;
  toggleFavorite: (id: number) => void;
  playAudio: (word: string) => void;
}

const WordList: React.FC<WordListProps> = ({ words, favorites, toggleFavorite, playAudio }) => {
  const [currentIndex, setCurrentIndex] = useState(0);
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [selectedWord, setSelectedWord] = useState<Word | null>(null);
  const cardBg = useColorModeValue('white', 'gray.700');
  const borderColor = useColorModeValue('gray.200', 'gray.600');

  const handleSwipeLeft = () => {
    setCurrentIndex(prev => (prev < words.length - 1 ? prev + 1 : 0));
  };

  const handleSwipeRight = () => {
    setCurrentIndex(prev => (prev > 0 ? prev - 1 : words.length - 1));
  };

  const swipeHandlers = useSwipe(handleSwipeLeft, handleSwipeRight);

  const handleWordDetail = (word: Word) => {
    setSelectedWord(word);
    onOpen();
  };

  if (words.length === 0) return null;

  const currentWord = words[currentIndex];

  return (
    <Box>
      <Box
        {...swipeHandlers}
        mb={6}
        onTouchStart={swipeHandlers.onTouchStart}
        onTouchMove={swipeHandlers.onTouchMove}
        onTouchEnd={swipeHandlers.onTouchEnd}
      >
        <WordCard
          word={currentWord}
          isFavorite={favorites.has(currentWord.id)}
          onToggleFavorite={() => toggleFavorite(currentWord.id)}
          onPlayAudio={() => playAudio(currentWord.word)}
          onShowDetail={() => handleWordDetail(currentWord)}
        />
      </Box>

      <Box mt={8}>
        <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
          {words.map((word, index) => (
            <Card
              key={word.id}
              bg={cardBg}
              border="1px"
              borderColor={borderColor}
              cursor="pointer"
              onClick={() => setCurrentIndex(index)}
              boxShadow={currentIndex === index ? 'outline' : 'sm'}
            >
              <CardBody p={3}>
                <Flex justifyContent="space-between" alignItems="center">
                  <Text fontWeight="bold" fontSize="sm">
                    {word.word}
                  </Text>
                </Flex>
                <Text fontSize="xs" color="gray.500" mt={1}>
                  {word.translation}
                </Text>
              </CardBody>
            </Card>
          ))}
        </SimpleGrid>
      </Box>

      <WordDetailModal
        isOpen={isOpen}
        onClose={onClose}
        word={selectedWord}
        isFavorite={selectedWord ? favorites.has(selectedWord.id) : false}
        onToggleFavorite={selectedWord ? () => toggleFavorite(selectedWord.id) : () => {}}
      />
    </Box>
  );
};

export default WordList;
